<template>
    <div class="file-menu-all">
        <el-tree class="custom-tree" style="max-width: 1000px;width:600px;" :data="data" :props="defaultProps" accordion
            @node-click="handleNodeClick" />
    </div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { onMounted, ref, reactive } from 'vue';
import { defineProps } from 'vue'
import { serverAddress } from '@/config'
import { defineEmits } from 'vue'; 
const emit = defineEmits(['PutCode']);  
const props = defineProps({
    originPath: String,
})

interface Tree {
    label: string
    children?: Tree[];
    fullPath?: string;
}

const data = reactive<Tree[]>([
    {
        label: props.originPath,
        fullPath: props.originPath, // 根节点的 fullPath 初始化为空字符串
        children: [
            { label: '正在加载...' }
        ], // 初始时显示加载状态
    },
]);
const handleNodeClick = async (node: Tree) => {
    console.log(node.fullPath);
    if (node.children && node.label !== '正在加载...') {//'正在加载'无法点击
        axios({
          //  url: `${serverAddress}/apkUpload/getFolderInformationByPath?windowPath=${node.fullPath}`,
            url: "https://apifoxmock.com/m2/4743995-0-default/191328480",
            method: "GET",
            headers: {  
    }  
            // params: {
            //     windowPath: node.fullPath,
            // },
        }).then((Response) => {
            // node.children = Object.keys(Response.data.data)
            //     .filter(key => Response.data.data[key] === 3) // 可选：如果你只想包含图片URL  
            //     .map(key => ({
            //         label: key,
            //     }));
            node.children = Object.keys(Response.data.data).map(key => {
                const value = Response.data.data[key];
                if (value === 3) {
                    return { label: key };
                }
                else if (value === 1) {
                    console.log(node.fullPath + '/' + key)
                    return {
                        label: key,
                        fullPath: node.fullPath + '/' + key,
                    };
                }
                else if (value === 2) {
                    return {
                        label: key,
                        fullPath: node.fullPath + '/' + key,
                        children: [{ label: '正在加载...' }],
                    };
                }
                else {
                    return {
                        label: '加载错误'
                    };
                }
            })
        }).catch((error) => {
            console.log(error)
        })
    } else if (!node.fullPath&&!node.children) {
        window.open(node.label, '_blank');
    }else{
        axios({
            url:'https://apifoxmock.com/m2/4743995-0-default/191330341',
            // url: `${serverAddress}/apkUpload/getCodeByPath`,
            method:'GET',
            data:{
                windowPath:node.fullPath,
            }
        }).then((response)=>{
            console.log(response.data)
            emit('PutCode',response.data.data,node.label)
        }).catch((error)=>{
            
        })
    }
};

const defaultProps = {
    children: 'children',
    label: 'label',
}
</script>
<style>
.custom-tree {
    background-color: transparent !important;
    color: white !important;
}

.file-menu-all {
    position: relative;
    top: 20px;
}

/* 如果需要，也可以为节点添加特定样式 */
.custom-tree .el-tree-node__content {
    color: rgb(208, 208, 208) !important;
    /* 确保节点文字颜色也是白色 */
}

.custom-tree .el-tree-node__content:hover,
.custom-tree .el-tree-node__content:focus {
    color: black !important;
    background-color: azure !important;
}
</style>